<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form :inline="true" :model="dataPage">
          <el-form-item label="关键字">
            <el-input
              size="small"
              v-model="dataPage.keyword"
              placeholder="根据文章标题搜索"
              ref="title"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              size="small"
              v-model="dataPage.state"
              placeholder="请选择"
              ref="state"
            >
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="clearBtn">清除</el-button>
            <el-button type="primary" size="small" @click="searchBtn"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-edit"
              type="success"
              size="small"
              style="margin-left: 475px"
              @click="newSkill"
              >新增技巧</el-button
            >
          </el-form-item>
        </el-form>
        <!-- 提示消息 -->
        <el-alert
          :title="`数据一共 ${counts} 条`"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
        <!-- 表格数据 -->
        <el-table :data="data">
          <el-table-column label="序号" width="80" type="index">
          </el-table-column>
          <el-table-column
            label="文章标题"
            width="350"
            prop="title"
          ></el-table-column>
          <el-table-column
            label="阅读数"
            width="100"
            prop="visits"
          ></el-table-column>
          <el-table-column label="录入人" prop="username"></el-table-column>
          <el-table-column label="录入时间" prop="createTime">
            <template #default="{ row }">
              {{ time(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="120" prop="state">
            <template #default="{ row }">
              {{ !!row.state ? '已启用' : '已禁用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="openPreview(row)">预览</el-button>
              <el-button type="text" @click="switchClick(row)">{{
                row.state == 1 ? '禁用' : '启用'
              }}</el-button>
              <el-button
                type="text"
                :disabled="row.state == '1'"
                @click="modifyBtn(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="row.state == '1'"
                @click="open(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row
          type="flex"
          align="middle"
          justify="end"
          style="height: 30px; margin-top: 15px"
        >
          <!-- 分页器 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="dataPage.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="dataPage.pagesize"
            layout="  prev, pager, next,sizes, jumper"
            :total="counts"
            background
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- 新增技巧的弹框 -->
    <el-dialog
      title="新增文章"
      :visible.sync="dialogVisible"
      width="55%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题：" prop="title">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入文章标签"
          ></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" prop="articleBody">
          <!-- 富文本编辑器 -->
          <quill-editor
            v-model="ruleForm.articleBody"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            @ready="onEditorReady($event)"
            style="height: 200px"
          >
          </quill-editor>
        </el-form-item>
        <el-form-item
          label="视频地址："
          prop="videoURL"
          style="margin-top: 75px"
        >
          <el-input
            v-model="ruleForm.videoURL"
            placeholder="请输入视频地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" align="bottom" justify="end" style="height: 50px">
            <el-button @click="cancelBtn">取 消</el-button>
            <el-button type="primary" @click="addBtn">确 定</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 预览弹窗 -->
    <el-dialog
      title="预览文章"
      :visible.sync="previewDialog"
      width="55%"
      @close="cancelPreview"
    >
      <h3 v-html="preview.title"></h3>
      <p>
        {{ time(preview.createTime) }} 超级管理员 <i class="el-icon-view"></i>
        {{ preview.visits }}
      </p>
      <div v-html="preview.articleBody" class="details"></div>
    </el-dialog>
  </div>
</template>

<script>
import {
  list,
  remove,
  changeState,
  add,
  detail,
  update
} from '@/api/hmmm/articles'
// 富文本编辑器导入
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入处理时间js
import dayjs from 'dayjs'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      // 列表数据
      data: [],
      // 开关
      switchName: '',
      // 总条数
      counts: 0,
      dataPage: {
        // 当前显示第1页
        page: 1,
        // 当前页是显示十条
        pagesize: 10,
        // 关键词
        keyword: '',
        // 状态
        state: null
      },
      // 添加修改对话框开关
      dialogVisible: false,
      // 预览对话框开关
      previewDialog: false,
      rows: {
        id: null,
        state: 0
      },
      ruleForm: {
        // 文章标题
        title: '',
        // 富文本内容
        articleBody: '',
        // 视频地址
        videoURL: ''
      },
      // 新增技巧 对话框规则校验
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      // 富文本编辑器配置
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            ['blockquote', 'code-block'], // 引用  代码块
            ['image', 'link'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },
      // 预览数据
      preview: {}
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    // 获取列表
    async getlist () {
      const { data } = await list(this.dataPage)
      this.data = data.items
      console.log(data)
      this.counts = data.counts
    },
    // 操作时间
    time (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 启用禁用开关
    async switchClick (row) {
      console.log(row)
      row.state = Number(!row.state)
      await changeState(row)
      this.$nextTick(() => {
        this.$message.success('操作成功')
        this.getlist()
      })
    },
    // 点击删除
    open (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        this.getlist()
      })
    },
    // 每页条数发生改变
    handleSizeChange (val) {
      this.dataPage.pagesize = val
      this.getlist()
      console.log(`每页 ${val} 条`)
    },
    // 当前页数发生改变
    handleCurrentChange (val) {
      this.dataPage.page = val
      this.getlist()
      console.log(`当前页: ${val}`)
    },
    // 清除按钮
    clearBtn () {
      this.dataPage.keyword = ''
      this.dataPage.state = ''
    },
    // 搜索功能
    searchBtn () {
      this.dataPage.keyword = this.$refs.title.value
      this.dataPage.state = this.$refs.state.value
      this.getlist()
    },
    // 新增技巧
    newSkill () {
      this.dialogVisible = true
      this.ruleForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 新增数据
    handleClose (done) {
      done()
    },
    // 富文本失去焦点事件
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    // 富文本获得焦点事件
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    },
    // 富文本内容改变事件
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    // 点击取消
    cancelBtn () {
      this.dialogVisible = false
      this.ruleForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 点击添加
    addBtn () {
      this.$refs.ruleForm.validate(async vaild => {
        if (vaild) {
          if (this.ruleForm.id) {
            await update(this.ruleForm)
          } else {
            await add(this.ruleForm)
          }
          this.getlist()
          this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功')
          this.ruleForm = {
            title: '',
            articleBody: '',
            videoURL: ''
          }
          this.dialogVisible = false
        }
      })
    },
    // 点击修改
    async modifyBtn (row) {
      this.dialogVisible = true
      const res = await detail(row)
      this.ruleForm = res.data
    },
    // 打开预览对话框时执行的方法
    async openPreview (row) {
      this.previewDialog = true
      const { data } = await detail(row)
      this.preview = data
      console.log(data)
    },
    // 关闭预览对话框执行的方法
    cancelPreview () {
      this.previewDialog = false
    }
  }
}
</script>

<style scoped>
.details {
  background-color: #f5f5f5;
  min-height: 70px;
  line-height: 18px;
  padding: 10px;
  border-top: 1px dashed #cccccc;
}
</style>
